<template>
  <a-drawer
    title="修改车辆"
    :maskClosable="false"
    width=650
    placement="right"
    :closable="false"
    @close="onClose"
    :visible="visible"
    style="overflow: auto;padding-bottom: 53px;">
    <a-form :form="form">
      <a-form-item label='标题' v-bind="formItemLayout">
        <a-input v-decorator="['title',{rules: [{ required: true, message: '标题不能为空'}]}]"/>
      </a-form-item>
      <a-form-item label='车编号' v-bind="formItemLayout">
        <a-input v-decorator="['bianhao',{rules: [{ required: true, message: '车编号不能为空'}]}]"/>
      </a-form-item>
      <a-form-item label='车牌号' v-bind="formItemLayout">
        <a-input
          v-decorator="['chepaihao',{rules: [{ required: true, message: '车牌号不能为空'}]}]"/>
      </a-form-item>
      <a-form-item label='车辆类型' v-bind="formItemLayout">
         <a-select v-decorator="['cheliangleixing', {rules: [{ required: true, message: '车辆类型不能为空'}]}]">
          <a-select-option value="碰撞">碰撞</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label='车系' v-bind="formItemLayout">
        <a-input
          v-decorator="['chexi',{rules: [{ required: true, message: '车系不能为空'}]}]"/>
      </a-form-item>
      <a-form-item label="产权特有" v-bind="formItemLayout">
        <a-input
          v-decorator="['chanquan',{rules: [{ required: true, message: '产权不能为空'}]}]"/>
      </a-form-item>
      <a-form-item label='初次登记' v-bind="formItemLayout">
        <a-month-picker
          v-decorator="['chucidengji', {rules: [{ type: 'object', required: true, message: '请填写初次登记' }]}]"
          show-time
          format="YYYY"
        />
      </a-form-item>
      <a-form-item label='户籍地' v-bind="formItemLayout">
        <a-input
          v-decorator="['hujidi',{rules: [{ required: true, message: '户籍地不能为空'}]}]"/>
      </a-form-item>
      <a-form-item label='停放地' v-bind="formItemLayout">
        <a-input
          v-decorator="['tingfangdi',{rules: [{ required: true, message: '停放地不能为空'}]}]"/>
      </a-form-item>
      <a-form-item label='只拍残值' v-bind="formItemLayout">
        <a-radio-group
          v-decorator="['caipaizhi']">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label='排放标准' v-bind="formItemLayout">
        <a-input
          v-decorator="['paifang',{rules: [{ required: true, message: '排放标准不能为空'}]}]"/>
      </a-form-item>
      <a-form-item label='马力' v-bind="formItemLayout">
        <a-input
          v-decorator="['mali']"/>
      </a-form-item>
      <a-form-item label='发动机品牌' v-bind="formItemLayout">
        <a-input
          v-decorator="['fadongjihao']"/>
      </a-form-item>
      <a-form-item label='变速箱品牌' v-bind="formItemLayout">
        <a-input
          v-decorator="['biansuxianghao']"/>
      </a-form-item>
      <a-form-item label='钥匙数量' v-bind="formItemLayout">
        <a-input
          v-decorator="['yaoshishu']"/>
      </a-form-item>
      <a-form-item label='备胎' v-bind="formItemLayout">
        <a-input
          v-decorator="['beitai']"/>
      </a-form-item>
      <a-form-item label='登记证书' v-bind="formItemLayout">
        <a-input
          v-decorator="['dengjizhengshu']"/>
      </a-form-item>
      <a-form-item label='行驶证' v-bind="formItemLayout">
        <a-input
          v-decorator="['xingshizheng']"/>
      </a-form-item>
      <a-form-item label='营业执照' v-bind="formItemLayout">
        <a-input
          v-decorator="['yinyezhizhao']"/>
      </a-form-item>
      <a-form-item label='委托书' v-bind="formItemLayout">
        <a-input
          v-decorator="['weituoshu']"/>
      </a-form-item>
      <a-form-item label='是否抵押' v-bind="formItemLayout">
        <a-radio-group
          v-decorator="['shifoudiya']">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="0">否</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label='其它费用' v-bind="formItemLayout">
        <a-input
          v-decorator="['qitafeiyong']"/>
      </a-form-item>
      <a-form-item label='状态' v-bind="formItemLayout">
        <a-select
          :allowClear="true"
          :dropdownStyle="{ maxHeight: '220px', overflow: 'auto' }"
          v-decorator="['status']">
          <a-select-option :value="1">公开</a-select-option>
          <a-select-option :value="2">竞价中</a-select-option>
          <a-select-option :value="3">完成</a-select-option>
        </a-select>
          <!-- model.status -->
      </a-form-item>
      <a-form-item label='竞价状态' v-bind="formItemLayout">
        <a-select
          :allowClear="true"
          :dropdownStyle="{ maxHeight: '220px', overflow: 'auto' }"
          v-decorator="['jingjiaStatus']">
          <a-select-option :value="1">一次性</a-select-option>
          <a-select-option :value="2">一口价</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label='车类型' v-bind="formItemLayout">
        <a-select
          :allowClear="true"
          :dropdownStyle="{ maxHeight: '220px', overflow: 'auto' }"
          v-decorator="['chengjiaoLeixing']">
          <a-select-option :value="1">商用车</a-select-option>
          <a-select-option :value="2">乘用车</a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item v-if="form.getFieldValue('jingjiaStatus')==2" label='一口价' v-bind="formItemLayout">
        <a-input
          v-decorator="['yikoujia',{rules: [{ required: true, message: '一口价不能为空'}]}]"/>
      </a-form-item>
<!--       <a-form-item label='指导价' v-bind="formItemLayout">
        <a-input
          v-decorator="['zhidaojia',{rules: [{ required: true, message: '指导价不能为空'}]}]"/>
      </a-form-item> -->
      <a-form-item label='保证金' v-bind="formItemLayout">
        <a-input
          v-decorator="['baozhengjin',{rules: [{ required: true, message: '保证金不能为空'}]}]"/>
      </a-form-item>
      <a-form-item label='底价' v-bind="formItemLayout">
        <a-input
          v-decorator="['dijia',{rules: [{ required: true, message: '底价不能为空'}]}]"/>
      </a-form-item>

      <a-form-item label='最低加价' v-bind="formItemLayout">
        <a-input
          v-decorator="['jiajia',{rules: [{ required: true, message: '最低加价不能为空'}]}]"/>
      </a-form-item>
      <a-form-item label="竞拍开始时间" v-bind="formItemLayout">
        <a-date-picker
          v-decorator="['start', {rules: [{ type: 'object', required: true, message: '请选择竞拍开始时间' }]}]"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>
      <a-form-item label="竞拍结束时间" v-bind="formItemLayout">
        <a-date-picker
          v-decorator="['end', {rules: [{ type: 'object', required: true, message: '请选择竞拍结束时间' }]}]"
          show-time
          format="YYYY-MM-DD HH:mm:ss"
        />
      </a-form-item>

      <a-form-item label='车辆图片' v-bind="formItemLayout">
        <a-upload
          :action="uploadUrl"
          list-type="picture-card"
          :file-list="fileList"
          multiple
          @preview="handlePreview"
          @change="handleChange"
        >
          <div>
            <a-icon type="plus" />
            <div class="ant-upload-text">
              Upload
            </div>
          </div>
        </a-upload>
        <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
          <img alt="example" style="width: 100%" :src="previewImage" />
        </a-modal>
      </a-form-item>
    </a-form>
      <div class="drawer-bootom-button">
        <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
          <a-button style="margin-right: .8rem">取消</a-button>
        </a-popconfirm>
        <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
      </div>
  </a-drawer>
</template>
<script>
import moment from 'moment';
import 'moment/locale/zh-cn';
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 18 }
}

function getBase64 (file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}

export default {
  name: 'vehicleAdd',
  props: {
    visible: {
      default: false
    }
  },
  data () {
    return {
      model: {},
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      uploadUrl: '/auction-api/public/upload',
      fileList: [],
      previewVisible: false,
      previewImage: ''
    }
  },
  methods: {
    moment,
    handleCancel () {
      this.previewVisible = false
    },
    async handlePreview (file) {
      if (!file.url && !file.preview) {
        file.preview = await getBase64(file.originFileObj)
      }
      this.previewImage = file.url || file.preview
      this.previewVisible = true
    },
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
    reset () {
      this.loading = false
      this.form.resetFields()
      this.fileList = []
    },
    onClose () {
      this.reset()
      this.$emit('close')
    },
    setFormValues (record) {
      this.recordId = record.id
      Object.keys(record).forEach((key) => {
        let value = record[key]
        if (['end', 'start', 'chucidengji'].includes(key)) {
          value = moment(value)
        }
        // 转整型
        if (['caipaizhi', 'shifoudiya', 'status', 'jingjiaStatus'].includes(key)) {
          value = value * 1
        }
        this.form.setFieldsValue({[key]: value})
      })
      this.fileList = this.makeFileListBaseImages(record.images)
    },
    makeFileListBaseImages (images) {
      if (!Array.isArray(images)) return []
      return images.map((img, idx) => {
        // let url = `http://106.52.159.148/auction/images${img}`
        let url = `/auction/images${img}`
        return {
          response: {
            code: 200,
            result: url
          },
          uid: idx,
          name: img,
          url
        }
      })
    },
    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (!err) {
          let images = this.fileList
            .filter(({ response }) => response && response.code * 1 === 200)
            .map(({ response }) => response.result)
          let model = this.form.getFieldsValue()

          // this.$post('vehicle/updateVehicleStatus', {
          this.$post('vehicle/updateVehicle', {
            images,
            id: this.recordId,
            ...model,
            start: model.start.unix() * 1000,
            end: model.end.unix() * 1000,
            chucidengji: model.chucidengji.format('YYYY')
          }).then((r) => {
            this.reset()
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })
        }
      })
    }
  },
  watch: {
    visible () {
      if (this.visible) {
        this.$get('role').then((r) => {
          this.roleData = r.data.rows
        })
        this.$get('dept').then((r) => {
          this.deptTreeData = r.data.rows.children
        })
      }
    }
  }
}
</script>
